<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>添加直播商品</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="商品ID" :required="true" prop="id">
                            <el-input v-model="form.id" placeholder="请输入商品ID">
                                <template slot="append"><a href="#" @click="getGood">获取</a></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="名称" :required="true" prop="name">
                            <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
                            <div class="yb_margin lh16">请输入商品名称，不得超过14个字符</div>
                        </el-form-item>
                        <el-form-item label="图片" :required="true" prop="src">
                            <div class="uploadSource bor_de rel flex" v-if="form.src">
                                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                                    <i class="el-icon-check" ref="imgicon1"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(form.src,1)"></i>
                                </label>
                                <img :src="form.src" @click='test(1)' class="wid"/>
                            </div>
                            <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                            <div class="yb_margin">建议尺寸：200×200</div>
                        </el-form-item>
                        <el-form-item label="价格形式">
                            <div>
                                <el-radio label="1" v-model="form.priceType">一口价</el-radio>
                                <el-input v-model="form.price" placeholder="请输入金额" :disabled="form.priceType != '1'">
                                    <template slot="append">元</template>
                                </el-input>
                            </div>
                            <div class="mar_t10 time_item">
                                <el-radio label="2" v-model="form.priceType">区间价</el-radio>
                                <el-input v-model="form.price" placeholder="请输入金额" :disabled="form.priceType != '2'">
                                    <template slot="append">元</template>
                                </el-input>
                                <span class="mar_lr10">—</span>
                                <el-input v-model="form.price2" placeholder="请输入金额" :disabled="form.priceType != '2'">
                                    <template slot="append">元</template>
                                </el-input>
                            </div>
                            <div class="mar_t10 time_item">
                                <el-radio label="3" v-model="form.priceType">折扣价</el-radio>
                                <span class="mar_lr10">原价</span>
                                <el-input v-model="form.price" placeholder="请输入金额" :disabled="form.priceType != '3'">
                                    <template slot="append">元</template>
                                </el-input>
                                <span class="mar_lr10">现价</span>
                                <el-input v-model="form.price2" placeholder="请输入金额" :disabled="form.priceType != '3'">
                                    <template slot="append">元</template>
                                </el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="小程序路径" :required="true" prop="url" disabled="disabled">
                            <el-input v-model="form.url" placeholder="请输入小程序路径"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">添加直播商品</el-button>
        </div>
    </div>
</template>
<script>
    import attachmentImg from "@/plugins/attachment-img";
    import {findGood, addGoods,getMediaid,goodsDetails} from "@/api/plug";
    // import {getBase64,translateBase64ImgToFile} from "@/utils/index";
    // import axios from 'axios';
    // import indexPash from '../../../api/index';

    export default {
        components: {attachmentImg,},
        created() {
            if (this.$route.query.goodsId) {
                this.goodsId = this.$route.query.goodsId
                this.edit()
            }
        },
        data() {
            return {
                form: {
                    name: '',
                    id: '',
                    src: '',
                    price: '0',
                    price2: '0',
                    priceType: '1',
                    url: '',
                    coverImgUrl: '',
                },
                collapseName: '',
            }
        },
        methods: {
            enter(i = 0) {
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i = 0) {
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.src = url.str
                this.UrlToWxImg(this.form.src)
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.src = '';
                            break
                    }
                }
            },
           async getGood(){
                if(this.form.id){
                    const {data} = await findGood({id: this.form.id});
                    this.form.name = data.name
                    this.form.src = data.icon
                    this.form.price = data.costPrice?data.costPrice:0
                    this.form.price2 = data.crossedPrice?data.crossedPrice:0
                    this.form.url = `yb_wm/shop/out/goods-dl?gid=${this.form.id}&page=index`
                    if(data.icon){
                        console.log(data.icon)
                        this.UrlToWxImg(this.form.src)
                    }
                }else {
                    this.$baseMessage('请输入商品ID', "error");
                }
            },
            async UrlToWxImg(src){
                const {data} = await getMediaid({src,})
               this.form.coverImgUrl = data.media_id
            },
            // 图片转换
            // UrlToWxImg($url) {
            //     getBase64($url).then(function (base64) {
            //             var result = translateBase64ImgToFile(base64, "ybwm.jpg", "image/jpeg");
            //         let param = new FormData();
            //         // param.append("file", "wiiiiiinney");
            //         //通过append向form对象添加数据
            //             param.append("file", result);
            //             //FormData私有类对象，访问不到，可以通过get判断值是否传进去
            //             // console.log(111,param.get("file"));
            //             let config = {
            //                 //添加请求头
            //                 headers: { "Content-Type": "multipart/form-data" },
            //                 //添加上传进度监听事件
            //                 // onUploadProgress: e => {
            //                 //     var completeProgress = ((e.loaded / e.total * 100) | 0) + "%";
            //                 //     this.progress = completeProgress;
            //                 // }
            //             };
            //         let backendPath = indexPash.backendPath;
            //             axios.post(backendPath + 'channel/live/get-mediaid', param, config).then(
            //                 function (res) {
            //                     console.log(res)
            //                     // _this.Form.shareImg_media_id = res.data.data.media_id
            //                 })
            //                 .catch(function (error) {
            //                     console.log(error);
            //                 });
            //         }, function (err) {
            //             console.log(err);//打印异常信息
            //         });
            // },
            async edit() {
                const {data} = await goodsDetails({goods_ids: this.goodsId})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        const {msg} = await addGoods(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="scss">
    .time_item .el-input {
        width: 180px;
    }
</style>
